<template>
    <Content>
        <div class="row">
            <div class="col-3 ">
                <UserProfileInfo @follow="follow" @unfollow="unfollow" :user="user" />
                <UserProfileWrite v-if="is_me" @post_a_post="post_a_post" />
            </div>
            <div class="col-9">
                <UserProfilePosts :user="user" :posts="posts" @delete_a_post="delete_a_post"/>
            </div>
        </div>
    </Content>
 </template>
 
 <script>
 import Content from '../components/Content.vue';
 import UserProfileInfo from '../components/UserProfileInfo.vue';
 import UserProfilePosts from '../components/UserProfilePosts.vue';
 import UserProfileWrite from '../components/UserProfileWrite.vue';
 import {reactive} from 'vue';
 import {useRoute} from 'vue-router';
 import $ from 'jquery'
 import { useStore } from 'vuex';
 import {computed} from 'vue';

 export default{
     name:'UserProfileView',
     components:{
         // eslint-disable-next-line vue/no-unused-components
         Content,
         UserProfileInfo,
         UserProfilePosts,
         UserProfileWrite,
     },

     setup(){

        const route = useRoute();
        const store = useStore();
        const userId = route.params.userId;
       // console.log(userId);

        const user = reactive({
           
        });

        const posts = reactive({
           
        });

        $.ajax({  //获取每个用户信息
            url:"https://app165.acapp.acwing.com.cn/myspace/getinfo/",
            type:"GET",
            data:{
                user_id : userId,
            },
            headers: {
                'Authorization' : "Bearer " + store.state.user.access,
            },
            success(resp){
                user.id = resp.id;
                user.username = resp.username;
                user.photo = resp.photo;
                user.followerCount = resp.followerCount;
                user.is_followed = resp.is_followed;
            }
        });

        $.ajax({  //获取当前用户所有帖子
            url: "https://app165.acapp.acwing.com.cn/myspace/post/",
            type: "GET",
            data : {
                user_id : userId,
            },
            headers: {
                'Authorization' : "Bearer " + store.state.user.access,
            },
            success(resp){
                //console.log(resp);
                posts.count = resp.length;
                posts.posts = resp;
            }
        });

        const follow = ()=>{
            if(user.is_followed) return;
            user.is_followed = true;
            user.followerCount ++;
        };

        const unfollow = ()=>{
            if(!user.is_followed) return;
            user.is_followed = false;
            user.followerCount --;
        };


        const post_a_post = (content) =>{
            posts.count ++;
            posts.posts.unshift({
                id : posts.count,
                userId : 1,
                content : content,
            })
        };

        const delete_a_post = post_id => {
            posts.posts = posts.posts.filter(post => post.id !== post_id);
            posts.count = posts.posts.length;
        };

        const is_me = computed( ()=> userId == store.state.user.id);

        return{
            user,
            follow,
            unfollow,
            posts,
            post_a_post,
            delete_a_post,
            is_me,
        }
     }
 }
 </script>
 
 <style scoped>
 </style>